<template>
	<view class="container" style="height: 100%;overflow: hidden;">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="我的" rightIcon="gear" @clickLeft="back" @clickRight="goRight"/>
		<view style="width: 100%;margin: 0px auto;overflow: hidden">
			<view class="top">
				<image style="width: 100%;max-height: 130px;background-size: 100% 100%;" src="/static/image/userBack.png" mode=""></image>
				<view class="topImg">
					<image v-if="sysInfo.froleid == 1" src="/static/image/adminImg.png" style="background-size: 100% 100%;width: 80%;height: 80%;"/>
					<image v-else src="/static/image/userImg.png" style="background-size: 100% 100%;width: 80%;height: 80%;"/>
				</view>
				<view class="topName">
					<view>{{sysInfo.userName}}</view>
					<view>{{sysInfo.froleidName}}</view>
					<view>{{sysInfo.userId}}</view>
				</view>
				<!-- <text style="font-size: 40rpx;">{{name}}</text> -->
			</view>
			<uni-group>
				 <uni-list>
					 <!-- <uni-list-item thumb="/static/image/police.png" title="使用安全" link @click="safe" to="/pages/me/safe"> -->
					 <uni-list-item thumb="/static/image/police.png" title="安全总览" link @click="safe">
						 <template v-slot:footer>
						 	<uni-badge style="position: absolute;left: 11%;top: -5%;" class="uni-badge-left-margin" type="error" :text="customValue.syaq" />
						 </template>
					 </uni-list-item>
					 <uni-list-item class="examine" thumb="/static/image/examine.png" title="审批信息" link @click="approval">
						 <template v-slot:footer>
						 	<uni-badge style="position: absolute;left: 11%;top: -5%;" class="uni-badge-left-margin" type="error" :text="customValue.spxx" />
						 </template>
					 </uni-list-item>
					 <uni-list-item class="addWork" thumb="/static/image/overtime.png" title="加班申请" link @click="work">
						 <template v-slot:footer>
						 	<uni-badge style="position: absolute;left: 11%;top: -5%;" class="uni-badge-left-margin" type="error" :text="customValue.jbsq" />
						 </template>
					 </uni-list-item>
				 </uni-list>
			</uni-group>
		</view>
		<view class="tabBar_all">
			<view @click="tabOneClick()" class="tarBar_item">
				<image class="tabBar_icon" :src="tabOne" mode=""></image>
			</view>
			<view v-if="sysInfo.froleid == 2" @click="tabTwoClick()" class="tarBar_item">
				<image class="tabBar_icon" :src="tabTwo" mode=""></image>
			</view>
			<view class="tarBar_item">
				<image class="tabBar_icon" :src="tabThree" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				interval: null,
				sysInfo: null,
				customValue: {
					syaq:0,
					spxx:0,
					jbsq:0,
				},
				name: '',
				tabOne: '/static/image/home1.png',
				tabTwo: '/static/image/record1.png',
				tabThree: '/static/image/me.png',
			}
		},
		onLoad() {
			that = this;
			that.sysInfo = this.$sys.getSysInfo();
			console.log('that.sysInfo',that.sysInfo)
			that.$util.setPageTitle(`我的`)
			that.getCustom()
			
		},
		onUnload() {
			clearInterval(that.interval)
			that.interval = null
		},
		methods: {
			getCustom(){
				that.$http.get('material/useDetail/getCornerCount', {
					fsiteNo: that.sysInfo.fsiteNo,
					userid: that.sysInfo.userId,
					froleid: that.sysInfo.froleid,
				}).then(e => {
					console.log('e111',e)
					that.customValue = e
					
				}).catch(()=>{
					that.customValue = {
						syaq:0,
						spxx:0,
						jbsq:0,
					}
				})
				
				that.interval = setInterval(()=>{
					that.$http.get('material/useDetail/getCornerCount', {
						fsiteNo: that.sysInfo.fsiteNo,
						userid: that.sysInfo.userId,
						froleid: that.sysInfo.froleid,
					}).then(e => {
						console.log('e111',e)
						that.customValue = e
					}).catch(()=>{
						that.customValue = {
							syaq:0,
							spxx:0,
							jbsq:0,
						}
					})
				},5000)
			},
			logeout() {
				that.$util.showModal('退出登录','确定退出登录吗?',function(){
					that.$util.redirectTo('login/index')
				},'取消','确定',true)
			},
			// 跳转使用安全
			safe(){
				that.$util.pageTo('me/safe');
				clearInterval(that.interval)
				that.interval = null
			},
			// 跳转审批信息
			approval(){
				that.$util.pageTo('me/approval');
				clearInterval(that.interval)
				that.interval = null
			},
			// 跳转加班申请
			work(){
				that.$util.pageTo('me/work');
				clearInterval(that.interval)
				that.interval = null
			},
			// 首页跳转
			tabOneClick(){
				that.$util.redirectTo('index/index');
			},
			// 实验室预约跳转
			tabTwoClick(){
				that.$util.redirectTo('scence/index');
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			goRight(){
				that.$util.pageTo('me/seething')
			}
		}
	}
</script>

<style>
	.top{
		width: 92%;
		height: 220px;
		position: relative;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: 24px auto;
	}
	
	.topImg{
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 83px;
		left: 23px;
		border-radius: 50%;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(84, 92, 101, 0.41);
	}
	.topName{
		position: absolute;
		top: 140px;
		left: 140px;
	}
	.topName view:first-child{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 550;
		font-size: 20px;
		line-height: 20px;
		/* identical to box height, or 100% */
		color: #113A62;
		opacity: 0.6;
	}
	.topName view:nth-child(2){
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #8B9EB0;
		margin-top: 6px;
	}
	.topName view:last-child{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 13px;
		line-height: 20px;
		color: #8B9EB0;
		margin-top: 0px;
	}
</style>
